<%@page import="com.qububu.play.dineTogether.dto.ActionInfoDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String basePath = request.getContextPath();
ActionInfoDto actionInfo = (ActionInfoDto) request.getAttribute("actionInfo");
%>
<script type="text/javascript">
var ACTIONINFO = "<%=request.getAttribute("actionInfo")%>"; 
if (("null" == ACTIONINFO) || ("" == ACTIONINFO) || (null == ACTIONINFO) || (!ACTIONINFO)) {
	window.top.nowNotHaveActivity();
}
</script>
<%
if (request.getAttribute("actionInfo") == null)
	return ;
%>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/jquery/jquery-1.8.2.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="<%=basePath %>/resource/js/constants.js"></script>
<script type="text/javascript" src="<%=basePath %>/resource/js/ajax_constants.js"></script>
<script type="text/javascript">
var JOIN_PEOPLE = false;
$(function() {
	$("#joinActionButton").click(joinAction);
	loadStaff();
	$(".staff").live({
		"mouseover": function() {
			$(this).find(".staff_img").css("display", "none");
			$(this).find(".staff_word").css("display", "block");
		},
		"mouseout": function() {
			$(this).find(".staff_img").css("display", "block");
			$(this).find(".staff_word").css("display", "none");
		}
	});
});


// 任务卡的加载
function loadStaff() {
	var actionId = $("#actionId").val();
	$.ajax({
		url: WEBROOT + "/play/dine/getStaffs",
		type: "post",
		dataType: "json",
		data: {"actionId": actionId},
		success: function(res) {
			if (res.result == AjaxMsgConstants.SUCCESS) {
				showStaffListToPage(res.staffs);
				// 加载参加当前任务的人员
				loadJoinPeople();
			} else {
				alert("出错了"+ res.message);
			}
		}
	});
}



function showStaffListToPage(staffs) {
	var htmlStr = '';
	$("#staffContent").html("");
	var dataLength = 3;
	if (staffs.length < 3) {
		dataLength = staffs.length;
	}
	if (dataLength > 0) {
		for (var i = 0; i <= dataLength; i++) {
			var staff = staffs[i];
			htmlStr =   '<div style="float: left; width: 133px;height: 168px;margin-left: 36px;">'+
							'<div class="staff" style="width: 130px;height: 170px;">'+
								'<div class="staff_img" style="width: 130px;height: 170px;display:block;background:url('+WEBROOT+'/resource/images/play/maozi1.png)no-repeat; overflow: hidden;">'+
									'<div style="width: 130px;height: 23px; font-size: 23px; color: #FCAA50; font-weight: bold;margin-top: 100px;text-align:center;">'+staff.staffName+'</div>'+
									'<div style="width: 128px;height: 30px;font-size: 12px;color: #666666; margin-top: 15px;color: #81ad22;" id="staffStatus-'+staff.staffId+'">'+
										'任务状态: 等你来认领'+
									'</div>'+
								'</div>'+
							    '<div class="staff_word roleDescription" style="display: none">'+
							    	'<div style="width: 100%; height: 20px; line-height: 20px; font-size: 14px; color: #FFFFFF; text-align: center;">任务简介</div>'+
							    	'<div style="width: 100%; height: 130px; margin-top: 10px;">'+staff.explain+'</div>'+
							    '</div>'+
						    '</div>'+
					  '</div>';
			if (i > 0 && (i + 1) % 4 == 0) {
				htmlStr += '<div style="clear: both;"></div>';
			}
			$("#staffContent").append(htmlStr);
		}
	} else {
		// 统一的提示效果
		//alert("当前没有任务");
		$("#staffContent").html('<div style="width: 675px; height: 170px; padding: 10px; text-align: center; color: #81AD22;"><p>当前还没有任务,您可以在下面聊天框中联系建议活动负责人安排任务</p></div>');
	}
}

function joinAction() {
	// 判断是否登录
	if (userHadLogin()) {
		doJoinAction();	
	} else {
		window.top.openChatLogin("请先登录");
	}
}

/**
 * 判断用户是否登录, 和jquery.cookie.js一起用
 * */
function userHadLogin() {
	if ($.cookie("userHadLogin") && $.cookie("userHadLogin") === "true") {
		return true;
	}
	return false;
}

function doJoinAction() {
	var actionId = $("#actionId").val();
	$.ajax({
		url: WEBROOT + "/play/dine/ajaxAddActionPeople",
		type: "post",
		dataType: "json",
		data: {"peopleActionId": actionId},
		success: function(res) {
			if (res.result == AjaxMsgConstants.SUCCESS) {
				alert("参加成功");
			} else {
				alert("参加失败, 提示信息--"+ res.message);
			}
		}
	});
}

function loadJoinPeople() {
	var actionId = $("#actionId").val();
	$.ajax({
		url: WEBROOT + "/play/dine/getPeoples",
		type: "post",
		dataType: "json",
		data: {"actionId": actionId},
		success: function(res) {
			if (res.result == AjaxMsgConstants.SUCCESS) {
				JOIN_PEOPLE = res.peoples;
				changeStaffStatus();
			} else {
				if (!JOIN_PEOPLE) {
					setInterval(loadJoinPeople, 3000);
				}
			}
		}
	});
}

function changeStaffStatus() {
	$.each(JOIN_PEOPLE, function(index, actionPeople) {
		var node = $("#staffStatus-"+actionPeople.staffId);
		if (node) {
			node.html("该任务由<font color=\"red\">"+actionPeople.peopleName+"</font>认领");
		}
	});
}

</script>
<style>
body{
font-family: "微软雅黑";
width: 965px;
}
.caption{
font-family:"微软雅黑", MingLiU,PMingLiu;
color: #81ad22;
font-size: 24px;
}
.roleDescription{
	font-family: MingLiU;
	letter-spacing: 3px;
	width: 120px;
	height: 160px;
	font-size:12px; 
	line-height:20px;
	padding: 5px 5px 5px 5px;
	border: 5px solid #9AC43C; /*f48240*/
	color: #FFFFFF;
	background-color: #BFD884;
}
</style>
<body>
<div id = "dineActivity" style="width: 965px;height: auto; background-color: #ffffff;">
	<!-- <input type="hidden" id="actionId" value="1XDIWAcxyxGbpvAyPKU_wg" /> -->
	<input type="hidden" id="actionId" value="<%=actionInfo.getActionId() %>" />
	<input type="hidden" id="actionType" value="DINE" />
	<div style="width: 965px;height: 232px;">
		<div style="float: left; width: 180px;height: 180px;margin-top: 40px;margin-left: 32px; background:url('<%=basePath %>/resource/images/play/top_left.png') no-repeat; overflow: hidden;"></div>
		<div style="float: left; width: 695px;height: 230px;margin-left: 10px; background:url('<%=basePath %>/resource/images/play/top_center.jpg') no-repeat; overflow: hidden;">
			<div style="width: 310px;height: 125px;margin-left: 365px;margin-top: 85px;"> 
				<div class="caption" id="activityName" style="width: 310px;height: 25px;"><%=actionInfo.getActionTitle() %></div>
				<div id="activityContent" style="width: 310px;height: 15px;font-size: 15px;color: #81ad22;margin-top: 30px;">征集时间：<%=actionInfo.showBeginTimeInString() %>&nbsp;至&nbsp;<%=actionInfo.showEndTimeInString() %></div>
				<div id="positionName" style="width: 310px;height: 15px;font-size: 15px;color: #81ad22;margin-top: 10px;">针对社区：<%=actionInfo.getPosition().getPositionName() %></div>
				<div style="margin-top:25px;margin-left: 220px;">
					<!-- <input type="button" id="joinActionButton" style="width: 80px; height: 20px; background: #e6000f;color: #FFFFFF;font-size: 15px;font-weight: bold;cursor: pointer;border-style: none;" value="我要参加"> -->
					<input type="button" id="joinActionButton" style="width: 80px; height: 20px; background: #DAA500;color: #FFFFFF;font-size: 15px;font-weight: bold;cursor: pointer;border-style: none;" value="我要参加">
				</div>
			</div>
		</div>
		<div style="clear: both;"></div>
		<!-- 
		<div id="closeButton" style="cursor: pointer; width: 50px; height: 50px; position: absolute; z-index: 1000; top: 0; right: 0;">
			<img style="width: 50px; height: 50px;" src="<%=basePath %>/resource/images/play/close.jpg">
		</div>
		 -->
	
	</div>
	<div style="width: 965px; min-height: 740px; height: auto; height: 740px;">
		<div style="float: left; width: 212px; height: 740px;background:url('<%=basePath %>/resource/images/play/activityDescription.jpg') no-repeat; overflow: hidden;">
			<div style="width: 200px; height: auto;margin-top: 10px;">
				<div class="caption" style="width: 200px;height: 30px;font-size: 25px;text-align:right">活动说明</div>
				<div style="width: 200px;height: 400px;font-size: 13px;color: #81ad22;margin-top: 25px;line-height:35px;text-align:right">
					<%=actionInfo.getContent() %>
				</div>
			</div>
		</div>
		<div style="float: left; width: 695px;height: 740px;margin-left: 10px; background: url('<%=basePath %>/resource/images/play/activeDiscussion.jpg') no-repeat; overflow: hidden;">
			<div style="width: 695px;height: 267px;">
				<div class="caption" style="width: 695px;height: 55px;font-size: 25px;margin-top: 10px;text-align:center">任务卡</div>
				<div style="width: 695px;height: 190px; overflow: hidden;" id="staffContent">
					<div style="width: 675px; height: 170px; padding: 10px; text-align: center; color: #81AD22;">
						<p>即将为你展示该次活动你可以扮演的角色,</p>
						<p>如果你想担任其中角色,</p>
						<p>请在下面聊天框中联系活动负责人为你安排</p>
					</div>
				</div>
			</div>
			<div style="width: 695px;height: 444px;">
				<div style="width: 695px; height: 45px; background: url('<%=basePath %>/resource/images/play/frame-top.png') no-repeat; overflow: hidden;"></div>
				<!-- <div style="width: 690px; height: 370px;"> -->
				<div style="width: 685px;height: 370px; margin-left:2px;">
					<iframe id="posts" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border: 0; border-style: none; display: block; width: 100%; height: 100%;" src="<%=basePath %>/play/talk/chat" class="posts" ></iframe>
				</div>
				<div style="width: 695px;height: 28px; background:url(<%=basePath %>/resource/images/play/frame-buttom.jpg) no-repeat; overflow: hidden;"></div>
			</div>
		</div>
		<div style="clear: both;"></div>
	</div>
</div>
</body>
